<template>
  <div class="padding">
    <el-card>
      <div slot="header" class="clearfix relative">
        <span class="title-icon">柜子信息</span>
        <el-button
          type="success"
          size="mini"
          class="header-save-btn"
          @click="changeContainerInfo"
        >
          {{ isChangeContainerInfo ? "保存" : "编辑" }}
        </el-button>
      </div>
      <el-row :gutter="10">
        <el-col :span="18">
          <el-table :data="tableData" border size="mini">
            <el-table-column prop="boxType" label="柜型">
              <template slot-scope="scope">
                <el-select
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['boxType']"
                  placeholder="请选择柜型"
                  clearable
                  filterable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(k, v) in cabinetOptions"
                    :key="k"
                    :label="cabinetOptions[v]"
                    :value="k"
                  ></el-option>
                </el-select>

                <span v-else>{{ scope.row["boxType"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="contairNumber" label="柜号">
              <template slot-scope="scope">
                <el-input
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['contairNumber']"
                  clearable
                  size="mini"
                />
                <span v-else>{{ scope.row["contairNumber"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sealNumber" label="封条号">
              <template slot-scope="scope">
                <el-input
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['sealNumber']"
                  clearable
                  size="mini"
                />
                <span v-else>{{ scope.row["sealNumber"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="boxCount" label="件数">
              <template slot-scope="scope">
                <el-input
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['boxCount']"
                  clearable
                  size="mini"
                />
                <span v-else>{{ scope.row["boxCount"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="packageType" label="包装类型">
              <template slot-scope="scope">
                <el-select
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['packageType']"
                  placeholder="请选择包装类型"
                  clearable
                  filterable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(k, v) in packageTypeOptions"
                    :key="k"
                    :label="packageTypeOptions[v]"
                    :value="v"
                  ></el-option>
                </el-select>

                <span v-else>{{ scope.row["packageType"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grossWeight" label="毛重">
              <template slot-scope="scope">
                <el-input
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['grossWeight']"
                  clearable
                  size="mini"
                />
                <span v-else>{{ scope.row["grossWeight"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grossVolume" label="体积">
              <template slot-scope="scope">
                <el-input
                  v-if="isChangeContainerInfo"
                  v-model="scope.row['grossVolume']"
                  clearable
                  size="mini"
                />
                <span v-else>{{ scope.row["grossVolume"] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              v-if="isChangeContainerInfo"
              width="70"
            >
              <template slot-scope="scope">
                <i
                  class="el-icon-circle-plus-outline  text-bold text-green pointer"
                  @click="addRow(scope)"
                ></i>
                <i
                  class="el-icon-remove-outline margin-left-sm text-bold text-red pointer"
                  @click="removeRow(scope)"
                ></i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">
          <div class="padding-tb-sm">唛头:</div>
          <el-input
            v-if="isChangeContainerInfo"
            v-model="form.shippingMark"
            type="textarea"
          ></el-input>
          <span v-else>{{ form.shippingMark }}</span>
        </el-col>
        <el-col :span="3">
          <div class="padding-tb-sm">品名描述:</div>
          <el-input
            v-if="isChangeContainerInfo"
            v-model="form.nameDescription"
            type="textarea"
          ></el-input>
          <span v-else v-html="form.nameDescription"></span>
        </el-col>
        <el-col :span="3" v-if="pageType == 'seaFreight'">
          <div class="padding-tb-sm">船公司:</div>
          {{
            shipMap && Constatvariable.shipOrAirlineCompany
              ? shipMap[Constatvariable.shipOrAirlineCompany]
              : ""
          }}
          <span></span>
        </el-col>
        <el-col :span="3">
          <div class="padding-tb-sm">大船船只:</div>
          <!--          <el-input-->
          <!--            v-if="isChangeContainerInfo"-->
          <!--            v-model="form.bigShip"-->
          <!--            type="textarea"-->
          <!--          ></el-input>-->
          <!--          <span v-else>{{ form.bigShip }}</span>-->
          <span>{{ form.bigShip }}</span>
        </el-col>
        <el-col :span="3">
          <div class="padding-tb-sm">大船航次:</div>
          <!--          <el-input-->
          <!--            v-if="isChangeContainerInfo"-->
          <!--            v-model="form.shipFlights"-->
          <!--            type="textarea"-->
          <!--          ></el-input>-->
          <!--          <span v-else>{{ form.shipFlights }}</span>-->
          <span>{{ form.shipFlights }}</span>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  props: {
    Constatvariable: {
      type: Object,
      default: function() {
        return {};
      }
    },
    pageType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isChangeContainerInfo: false,
      form: {
        id: 0,
        waybillId: 0,
        nameDescription: "这是一条假数据",
        shippingMark: "这是一条假数据",
        bigShip: "这是一条假数据",
        shipFlights: "这是一条假数据"
      },
      //包装类型下拉
      packageTypeOptions: {},
      //柜型下拉
      shipMap: {},
      cabinetOptions: {},
      tableData: [
        {
          id: 0,
          waybillId: 0,
          boxType: "1",
          contairNumber: "1",
          sealNumber: "1",
          boxCount: "1",
          packageType: "1",
          grossWeight: "1",
          grossVolume: "1"
        }
      ]
    };
  },
  mounted() {
    this.initContainData();
  },
  methods: {
    initContainData() {
      var param = {};
      const waybillId = this.$route.query.waybillId;
      param["waybillId"] = waybillId;
      ajax("initContainData", param).then(
        res => {
          if (res.code != 200) {
            console.log("初始化柜子信息失败");
          } else {
            if (null != res.data2) {
              this.form = res.data2;
            }
            if (null != res.data) {
              this.tableData = res.data;
            }
            if (null != res.data3) {
              this.cabinetOptions = res.data3["cabinetTypeMap"];
              this.packageTypeOptions = res.data3["packageType"];
              this.shipMap = res.data3["shipMap"];
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    changeContainerInfo() {
      if (this.isChangeContainerInfo) {
        // TODO 保存操作

        if (this.checkTableData()) {
          this.isChangeContainerInfo = false;
          var param = this.form;
          param["containInfos"] = this.tableData;
          param["id"] = this.form.waybillId;
          ajax("changeContainRemark", param).then(
            res => {
              if (res.code != 200) {
                if (null != res.message) {
                  this.$message.error(m(res.message));
                } else {
                  this.$message.error("修改失败!");
                }
              } else {
                this.$message.success("修改成功!");
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      } else {
        this.isChangeContainerInfo = true;
      }
    },
    checkTableData() {
      for (const i of this.tableData) {
        // if (!i.boxType) {
        //   this.$message.error("请填写柜型");
        //   return false;
        // }
        // if (!i.contairNumber) {
        //   this.$message.error("请填写柜号");
        //   return false;
        // }
      }
      return true;
    },
    addRow(row) {
      console.log(
        "%crow: ",
        "color: MidnightBlue; background: Aquamarine;",
        row
      );
      this.tableData.splice(row.$index + 1, 0, {
        boxType: "",
        contairNumber: "",
        sealNumber: "",
        boxCount: "",
        packageType: "",
        grossWeight: "",
        grossVolume: ""
      });
    },
    removeRow(row) {
      console.log(
        "%crow: ",
        "color: MidnightBlue; background: Aquamarine;",
        row.$index
      );
      if (this.tableData.length > 1) {
        this.tableData.splice(row.$index, 1);
      }
    }
  }
};
</script>

<style></style>
